import { Eye, Marshalling } from '@nutui/icons-react-taro';
import { Button, ConfigProvider, Image, Input } from '@nutui/nutui-react-taro';
import { View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useCallback, useState } from 'react';
import BasicLayout from '@/components/BasicLayout';
import gql from 'graphql-tag';
import useMutation from '@/hooks/useMutation';
import logo from "@/assets/images/logo.png"
const AuthMutation = gql`
  mutation Auth($account:String!,$password:String!){
    auth(account:$account,password:$password){
      token
    }
  }
`
const AuthWxMutation = gql`
  mutation Auth($code:String!){
    authWx(code:$code){
      token
    }
  }
`
const Login = () => {
  const src = logo;
  const [auth] = useMutation(AuthMutation, {
    onCompleted({ auth: { token } }) {
      Taro.setStorage({
        key: "token",
        data: token
      }).then(() => {
        Taro.switchTab({ url: '/pages/Mine/index' });
      }).catch(console.log)
    },
    onError(error) {
      Taro.showToast({ title: error.message, icon: 'none' })
    },
  })
  const [authWx] = useMutation(AuthWxMutation, {
    onCompleted({ authWx: { token } }) {
      Taro.setStorage({
        key: "token",
        data: token
      })
      Taro.switchTab({ url: '/pages/Mine/index' });
    },
    onError(error) {
      Taro.showToast({ title: error.message, icon: 'none' })
    },
  })
  const [account, setAccount] = useState('');
  const [password, setPassword] = useState('');
  const onAuth = useCallback(() => {
    if (account.length < 6) {
      Taro.showToast({ title: '请至少输入6位账号', icon: 'none' });
      return;
    }
    if (password.length < 6) {
      Taro.showToast({ title: '请至少输入6位密码', icon: 'none' });
      return;
    }
    auth({ account, password })
  }, [account, password])
  const [inputType, setInputType] = useState<'password' | 'text'>('password');

  const btnStyle = {
    nutuiButtonDefaultHeight: '42px', // 	type 为 default 的按钮的高度
  };
  const onWxLogin = useCallback(() => {
    Taro.login({
      success({ code }) {
        authWx({ code })
      },
    })
  }, [])


  const onRegister = () => {
    Taro.navigateTo({ url: '/pages/Register/index' });
  };

  return (
    <BasicLayout>
      <View className="flex-justify flex-col">
        <View className="h-[160rpx] mt-[120rpx] mb-[70rpx] flex-center">
          <Image src={src} mode="scaleToFill" width="80" height="80" radius="50%" />
        </View>
        <View className="flex flex-col px-[70rpx]">
          <View className="flex-center overflow-hidden shadow-[0_0_60rpx_0_rgba(43,86,112,.1)] rounded-[40rpx]">
            <Input value={account} onChange={setAccount} placeholder="请输入账号" />
          </View>
          <View className="mt-[40rpx] flex-center overflow-hidden shadow-[0_0_60rpx_0_rgba(43,86,112,.1)] rounded-[40rpx]">
            <Input value={password} onChange={setPassword} type={inputType} placeholder="请输入密码" />
            <View
              className="pr-[20rpx]"
              onClick={() => setInputType(inputType === 'text' ? 'password' : 'text')}
            >
              {inputType === 'text' ? <Eye /> : <Marshalling />}
            </View>
          </View>
        </View>

        <View className="mt-[90rpx] px-[70rpx]">
          <ConfigProvider theme={btnStyle}>
            <Button onClick={onAuth} block type="primary" color="#157658">
              登录
            </Button>
          </ConfigProvider>
        </View>

        <View className="flex-center flex-row mt-[60rpx] color-black text-[28rpx]">
          <View className="color-[#1E90FF]" onClick={onRegister}>
            注册账号
          </View>
        </View>
        <View className="flex-center flex-row mt-[60rpx] color-black text-[28rpx]">
          <View className="color-[#1E90FF]" onClick={onWxLogin}>
            微信登录
          </View>
        </View>
      </View>
    </BasicLayout>
  );
};

export default Login;
